<template>
    <div class="right-sidebar">
        <div class="p-0!">
            <div class="hot-title p-4!" style="height:32px; border:1px solid #e4e7ed; border-radius: 4px 4px 0 0; border-bottom: 0;">
                <div class="flex justify-between">
                    <div class="text-left">
                        <p class="text-lg font-bold" style="line-height:32px;">
                            热门题目榜
                        </p>
                    </div>
                    <el-button link type="primary" class="text-right">
                        <p class="text-sm" style="line-height:32px;">
                            更多
                        </p>
                    </el-button>
                </div>
            </div>
            <div class="hot-question-list px-4! pb-2! bg-white" style="border:1px solid #e4e7ed;border-radius: 0 0 4px 4px;border-top: 0;">
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
                <a href="" class="flex justify-between hot-question-item" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        为什么JDK1.8对HashMap进行了红黑树的改动？
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;width:100px">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-fire"></use>
                        </svg>
                        <span>57016</span>
                    </div>
                </a>
            </div>
        </div>
        <div class="p-0!" style="margin-top: 20px;">
            <div class="recommend p-4!" style="height:32px; border:1px solid #e4e7ed; border-radius: 4px 4px 0 0; border-bottom: 0;">
                <div class="flex justify-between">
                    <div class="text-left">
                        <p class="text-lg font-bold" style="line-height:32px;">
                            推荐教程
                        </p>
                    </div>
                    <el-button link type="primary" class="text-right">
                        <p class="text-sm" style="line-height:32px;">
                            更多
                        </p>
                    </el-button>
                </div>
            </div>
            <div class="px-4! pb-2! bg-white" style="border:1px solid #e4e7ed;border-radius: 0 0 4px 4px;border-top: 0;">
                <a href="" class="flex justify-between" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        AI超级智能体
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-right"></use>
                        </svg>
                    </div>
                </a>
                <a href="" class="flex justify-between" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        亿级流量点赞系统教程
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-right"></use>
                        </svg>
                    </div>
                </a>
                <a href="" class="flex justify-between" >
                    <p class="text-left item-title" style="height:38px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        智能协同云图库系统教程
                    </p>
                    <div class="text-right" style="height: 38px;line-height: 38px;">
                        <svg class="icon" aria-hidden="true" style="font-size: 11px;">
                            <use xlink:href="#icon-right"></use>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
        <div class="p-4! bg-white flex justify-between" style="margin-top: 20px;border:1px solid #e4e7ed; border-radius: 4px;">
            <img src="https://www.mianshiya.com/assets/mianshiyaGroup.webp" alt="" style="width: 90px;height: 90px;">
            <div class="py-3!" style="display: inline-block; margin-left: 15px;">
                <span class="text-lg font-bold">用户交流</span>
                <p class="text-sm mt-2!">一起刷题学习、求职交流、反馈建议、获取更新通知</p>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>

</script>
<style lang="scss" scope>
    // iconfont
    .icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        margin-right: 0.5em;
    }
</style>